.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
}

.card {
    box-shadow: var(--card--box-shadow, var(--card--box-shadow-offset-x) var(--card--box-shadow-offset-y) var(--card--box-shadow-blur-radius) var(--card--box-shadow-spread-radius) var(--card--box-shadow-color));
    background: var(--card--background);
    border-style: var(--card--border-style, var(--card--border-top-style) var(--card--border-right-style) var(--card--border-bottom-style) var(--card--border-left-style));
    border-color: var(--card--border-color, var(--card--border-top-color) var(--card--border-right-color) var(--card--border-bottom-color) var(--card--border-left-color));
    border-width: var(--card--border-width, var(--card--border-top-width) var(--card--border-right-width) var(--card--border-bottom-width) var(--card--border-left-width));
    border-radius: var(--card--border-radius, var(--card--border-top-left-radius) var(--card--border-top-right-radius) var(--card--border-bottom-right-radius) var(--card--border-bottom-left-radius));
    color: var(--card--color);
    font-size: var(--card--font-size);
    padding: var(--card--padding, var(--card--padding-top) var(--card--padding-right) var(--card--padding-bottom) var(--card--padding-left));
    transition-property: var(--card--transition-property);
    transition-duration: var(--card--transition-duration);
    transition-timing-function: var(--card--transition-timing-function);
}

.card-header, .card-footer {
    border-style: var(--card--border-style, var(--card--border-top-style) var(--card--border-right-style) var(--card--border-bottom-style) var(--card--border-left-style));
    border-color: var(--card--border-color, var(--card--border-top-color) var(--card--border-right-color) var(--card--border-bottom-color) var(--card--border-left-color));
    border-width: var(--card--border-width, var(--card--border-top-width) var(--card--border-right-width) var(--card--border-bottom-width) var(--card--border-left-width));
    border-right-width: 0;
    border-left-width: 0;
    padding: var(--card--padding, var(--card--padding-top) var(--card--padding-right) var(--card--padding-bottom) var(--card--padding-left));
}

.card-header {
    margin-top: calc(var(--card--padding-top) * -1);
    margin-right: calc(var(--card--padding-right) * -1);
    margin-bottom: var(--card--padding-bottom);
    margin-left: calc(var(--card--padding-left) * -1);
}

.card-image {
    margin-right: calc(var(--card--padding-right) * -1);
    margin-left: calc(var(--card--padding-left) * -1);
}

.card-image {
    overflow: hidden;
    margin-top: calc(var(--card--padding-top) * -1);
}

.card-image:first-child {
    border-top-left-radius: var(--card--border-top-left-radius);
    border-top-right-radius: var(--card--border-top-right-radius);
}

.card-image {
    margin-bottom: var(--card--padding-bottom);
}

.card-footer {
    margin-top: var(--card--padding-top);
    margin-right: calc(var(--card--padding-right) * -1);
    margin-bottom: calc(var(--card--padding-bottom) * -1);
    margin-left: calc(var(--card--padding-left) * -1);
}

.card .card-header:first-child, .card .card-footer:first-child {
    border-top-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--card--border-top-left-radius, var(--border-top-left-radius--md));
    border-top-right-radius: var(--card--border-top-right-radius, var(--border-top-right-radius--md));
}

.card .card-header:last-child, .card .card-footer:last-child {
    border-bottom-width: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: var(--card--border-bottom-right-radius, var(--border-bottom-right-radius--md));
    border-bottom-left-radius: var(--card--border-bottom-left-radius, var(--border-bottom-left-radius--md));
}

.card.-light {
    --card--border-top-color: var(--card--light--border-top-color);
    --card--border-right-color: var(--card--light--border-right-color);
    --card--border-bottom-color: var(--card--light--border-bottom-color);
    --card--border-left-color: var(--card--light--border-left-color);
    --card--background: var(--card--light--background);
    --card--color: var(--card--light--color);
}

.card.-dark {
    --card--border-top-color: var(--card--dark--border-top-color);
    --card--border-right-color: var(--card--dark--border-right-color);
    --card--border-bottom-color: var(--card--dark--border-bottom-color);
    --card--border-left-color: var(--card--dark--border-left-color);
    --card--background: var(--card--dark--background);
    --card--color: var(--card--dark--color);
}

.card.-sm {
    --card--border-top-left-radius: var(--card--sm--border-top-left-radius);
    --card--border-top-right-radius: var(--card--sm--border-top-right-radius);
    --card--border-bottom-right-radius: var(--card--sm--border-bottom-right-radius);
    --card--border-bottom-left-radius: var(--card--sm--border-bottom-left-radius);
    --card--font-size: var(--card--sm--font-size);
    --card--padding-top: var(--card--sm--padding-top);
    --card--padding-right: var(--card--sm--padding-right);
    --card--padding-bottom: var(--card--sm--padding-bottom);
    --card--padding-left: var(--card--sm--padding-left);
}

.card.-md {
    --card--border-top-left-radius: var(--card--md--border-top-left-radius);
    --card--border-top-right-radius: var(--card--md--border-top-right-radius);
    --card--border-bottom-right-radius: var(--card--md--border-bottom-right-radius);
    --card--border-bottom-left-radius: var(--card--md--border-bottom-left-radius);
    --card--font-size: var(--card--md--font-size);
    --card--padding-top: var(--card--md--padding-top);
    --card--padding-right: var(--card--md--padding-right);
    --card--padding-bottom: var(--card--md--padding-bottom);
    --card--padding-left: var(--card--md--padding-left);
}

.card.-lg {
    --card--border-top-left-radius: var(--card--lg--border-top-left-radius);
    --card--border-top-right-radius: var(--card--lg--border-top-right-radius);
    --card--border-bottom-right-radius: var(--card--lg--border-bottom-right-radius);
    --card--border-bottom-left-radius: var(--card--lg--border-bottom-left-radius);
    --card--font-size: var(--card--lg--font-size);
    --card--padding-top: var(--card--lg--padding-top);
    --card--padding-right: var(--card--lg--padding-right);
    --card--padding-bottom: var(--card--lg--padding-bottom);
    --card--padding-left: var(--card--lg--padding-left);
}
